<script setup lang="ts">
  import { ref,reactive } from 'vue';

  let user = reactive({name:'张三',age:18,gender:'男'})

  function add(){
    user.age++;
  }

  function change(){
    if(user.gender=='男'){
        user.gender='女'
    }else{
        user.gender='男'
    }
  }

  function changeUser(){
    // user={name:'李四',age:20,gender:'男'}  // 对象整体改变,不会在页面显示
    // 原因:reactive 创建的是一个 Proxy 代理对象，而 = 赋值操作只是更改了变量的引用，并没有修改原对象的内部属性。
    // 只是把 user 变量的引用改为一个新的普通对象，而 Vue 仍然监听的是原来的 Proxy 对象，所以不会触发视图更新。

    Object.assign(user,{name:'李四',age:20,gender:'男'})
    //原理：Object.assign() 只是修改了 user 内部的属性，而没有改变 user 的引用，Vue 仍然能监听到这些变化。
    
    console.log(user)
  }
</script>
<template>
    <div class="home">
        <h2>姓名:{{user.name}}</h2>
        <h2>年龄:{{user.age}}</h2>
        <h2>性别:{{user.gender}}</h2>
        <button @click="add">年龄+1</button>
        <button @click="change">改变性别</button>
        <button @click="changeUser">换个人</button>
    </div>
</template>
<style>

</style>